<template>
  <div class="shopitem" style="display: flex;flex-direction: row;flex-wrap: wrap">
      <div class="listitem" v-for="item in 10" >
        <img  style="width: 100%;padding: 10px"  src="../../../assets/v_ad.jpeg" alt="" srcset="">
        <div class="listbg" style="display: none">
            <div class="listbg_tit">
              <img src="../../../assets/home_logo.png" alt="">
              荣享吃喝玩乐
            </div>
            <div class="listbg_info">
                唯一银饰9999足银送妈妈年轻款女朋友情侣女士生日礼物满天星首饰.......
            </div>
        </div>
      </div>

  </div>
</template>

<script>
export default {
  name: 'shopitem',
  components:{

  }
}
</script>

<style lang="less">
.shopitem{
  width: 100%;
  padding: 0 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .listitem{
    width: 20%;
    position: relative;


    .listbg{
      position: absolute;
      top: 0%;
      left: 0;
      width: 100%;
      height: 0;
      overflow: hidden;
      background-color: rgba(0, 0, 0, .5);
      transition: all 0.3s;
      .listbg_tit{
        padding: 19px 20px;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        img{
          width: 37px;
          height: 37px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .listbg_info{
        padding:0 39px;
        font-weight: 500;
        font-size: 12px;
        line-height: 18px;
        color: #FFFFFF;
      }
    }

  }
}
.listitem:hover .listbg{
        height: 100%;
    }
</style>
